<template>
  <!-- <router-view /> -->
  <router-view v-slot="{ Component }">
    <!-- <keep-alive>
        <component :is="wrap(route.fullPath, Component)" :key="route.name"></component>
    </keep-alive> -->
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
    <!-- <component :is="Component" /> -->
  </router-view>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const wrapperMap = new Map()
function wrap(fullPath: any, component: any) {
  let wrapper
  // 重点就是这里，这个组件的名字是完全可控的，
  // 只要自己写好逻辑，每次能找到对应的外壳组件就行，完全可以写成任何自己想要的名字
  // 这就能配合 keep-alive 的 include 属性可控地操作缓存
  if (component) {
    const wrapperName = fullPath
    if (wrapperMap.has(wrapperName)) {
      wrapper = wrapperMap.get(wrapperName)
    } else {
      wrapper = {
        name: wrapperName,
        render() {
          return h('div', { className: 'vaf-page-wrapper' }, component)
        },
      }
      wrapperMap.set(wrapperName, wrapper)
    }
    return h(wrapper)
  }
}
</script>

<style lang="scss">
p,
h1,
h2,
h3,
h4,
h5 {
  margin: 0.5em 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
